<template>
  <div class="wrap">
    <van-search
      v-model="value"
      show-action
      :placeholder="value.value"
      @search="onSearch"
      @cancel="onCancel"
      @keyup="changeValue"
      @clear='onCancel'
    />

    <div
      v-show="searchListShow == false"
      :style="{
        background: !!currentTimekeywordList.length
          ? 'rgba(255,255,255,.4)'
          : '',
        height: !!currentTimekeywordList.length ? '613px' : '',
      }"
      id="loading"
    >
      <SearchKeyword v-show="historyShow">
        <h3 class="title iconTitle">
          历史记录
          <van-icon name="delete-o" @click="removeHistorySearch" />
        </h3>
        <div class="main">
          <a
            v-for="(item, index) in historySearch.search"
            :key="index"
            class="tag"
            @click="toSearchDetail(item)"
            >{{ item }}</a
          >
        </div></SearchKeyword
      >
      <SearchKeyword>
        <h3 class="title">热门搜索</h3>
        <div class="main">
          <a
            v-for="(item, index) in keywordsList"
            :key="index"
            class="tag"
            @click="toSearchDetail(item.keyword)"
            >{{ item.keyword }}</a
          >
        </div></SearchKeyword
      >
    </div>

    <div class="searchDetial" v-show="searchListShow">
      <div class="top">
        <p>综合</p>
        <p>价格</p>
        <p>分类</p>
      </div>
      <div class="content">
        <div class="searchDetialItem" v-for="item in searchList" :key="item.id">
          <img
            :src="item.listPicUrl"
            width="172.5"
            height="172.5"
            :alt="item.simpleDesc"
            v-lazy='item.listPicUrl'
          />
          <p class="title">{{ item.name }}</p>
          <div class="price">
            <p class="currentPage">
              <span style="font-size: 10px; color: red">¥</span>
              <span style="font-size: 16px; color: red; font-weight: 700">{{
                item.finalPriceInfoVO.priceInfo.finalPrice
                  ? item.finalPriceInfoVO.priceInfo.finalPrice.price
                  : item.sortOriginPrice
              }}</span>
              <!-- <span>.9</span> -->
              <span
                style="
                  font-size: 10px;
                  text-decoration: line-through;
                  color: #333;
                "
                v-show="item.finalPriceInfoVO.priceInfo.finalPrice"
                >¥{{ item.sortOriginPrice }}</span
              >
            </p>
          </div>
          <div
            class="bottom"
            v-show="item.finalPriceInfoVO.priceInfo.finalPrice"
          >
            <p class="left">特价</p>
            <p>正在抢购中</p>
          </div>
        </div>
      </div>
    </div>

    <ul v-show="show">
      <li
        v-for="(item, index) in currentTimekeywordList"
        :key="index"
        @click="toSearchDetail(item)"
      >
        <span class="item">{{ item }}</span>
        <van-icon name="arrow" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "@vue/runtime-core";
import {
  reqKeywordList,
  reqCurrentTimekeyword,
  reqSearchList,
} from "../../api/search/index";
import debounce from "lodash/debounce";
import SearchKeyword from "./searchKeyword.vue";
import { ElLoading } from "element-plus";
import { useRouter } from "vue-router";
//搜索框默认值
const value = ref("");
//默认关键词列表
const keywordsList = ref([]);
//控制弹出层
const show = ref(false);
//实时输入关键字列表
const currentTimekeywordList: any = ref([]);
//历史搜索记录
const historySearch: any = reactive({});
//历史记录显示与隐藏
const historyShow = ref(false);
//关键字搜索后数据
const searchList: any = ref([]);
//关键字搜索后分类项数据
const categoryL1List = ref([]);
//搜索详情页面显示与隐藏
const searchListShow = ref(false);
const loading: any = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
  });
};
const closeLoading = () => {
  loading.value.close();
};
const router = useRouter();
//弹出层显示位置
onMounted(() => {
 getKeywordsList();
  if (!!localStorage.getItem("historySearch")) {
    historySearch.search = JSON.parse(
      localStorage.getItem("historySearch") as string
    );
  } else {
    historySearch.search = [];
  }
  historyShow.value = !!historySearch.search.length;
});
//获取默认关键词
const getKeywordsList = async () => {
  let res: any = await reqKeywordList();
  value.value = res.defaultKeyword.keyword;
  keywordsList.value = res.hotKeywordVOList;
};
//搜索存入本地存储
const pushLocalStorage = () => {
  //判断本地存储是否有相同的val
  let repeat = historySearch.search.find((item: string) => item == value.value);
  if (!repeat) {
    //如果有相同的取反是false 不存入本地存储
    historySearch.search.push(value.value);
    let history = JSON.stringify(historySearch.search);
    localStorage.setItem("historySearch", history);
  }
};
//搜索框提交按钮回调
const onSearch = async (val: string) => {
  openLoading();
  pushLocalStorage();
  getsSearchDetialList();
  //显示历史搜索记录
  historyShow.value = true;
  closeLoading();
};
const getsSearchDetialList = async () => {
  //请求搜索数据
  let res: any = await reqSearchList(value.value);
  searchList.value = res.directlyList;
  categoryL1List.value = res.categoryL1List;
  //搜索详情显示
  searchListShow.value = true;
  //实时输入关键字列表隐藏
  show.value = false;
};
//搜索框取消按钮回调
const onCancel = () => {
  currentTimekeywordList.value = [];
  searchListShow.value = false;
  historyShow.value = true;
};
//搜索框内容改变回调
const changeValue = debounce(async () => {
  let res = await reqCurrentTimekeyword(value.value);
  currentTimekeywordList.value = res;
  show.value = true;
}, 50);
//清除本地存储搜索记录
const removeHistorySearch = () => {
  localStorage.removeItem("historySearch");
  historySearch.search = [];
  historyShow.value = false;
};
//点击tag或者li去搜索详情页
const toSearchDetail = async (item: string) => {
  openLoading();
  value.value = item;
  pushLocalStorage();
  await getsSearchDetialList();
  closeLoading();
};
</script>

<style scoped>
.wrap {
  width: 375px;
  overflow: hidden;
  position: relative;
}

ul {
  position: absolute;
  top: 54px;
  width: 375px;
  background: #fff;
  padding-left: 15px;
  box-sizing: border-box;
}
li {
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
li .item {
  display: inline-block;
  width: 320px;
}
li:last-child {
  border: none;
}
:deep().van-icon-arrow {
  width: 40px;
  text-align: center;
  height: 45px;
  line-height: 45px;
}
#centent .title {
  height: 45px;
  color: #999;
  line-height: 45px;
  font-size: 14px;
}
#centent .title.iconTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep().van-icon-delete-o {
  font-size: 20px;
}
.main {
  width: 375px;
  display: flex;
  flex-wrap: wrap;
}
.tag {
  display: block;
  height: 25px;
  padding: 0 7.5px;
  margin: 0 16px 16px 0;
  box-sizing: border-box;
  border: 1px solid #999;
  font-size: 12px;
  line-height: 25px;
  border-radius: 5px;
}
.tag:nth-child(0n + 1) {
  border: 1px solid #dd1a21;
  color: #dd1a21;
}
.top {
  width: 375px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top p {
  flex: 1;
  font-size: 14px;
  text-align: center;
  color: #333;
}
.content {
  padding: 10px 0 25px;
  width: 375px;
  display: flex;
  flex-wrap: wrap;
}
.content .searchDetialItem {
  flex: 48%;
  width: 187.5px;
  height: 309.5px;
  box-sizing: border-box;
  padding: 0 5px 26px 10px;
}
.content .searchDetialItem img {
  border-radius: 10px;
}
.content .searchDetialItem .title {
  font-size: 16px;
  width: 172.5px;
  height: 45px;
  box-sizing: border-box;
  line-height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content .searchDetialItem .bottom {
  width: 172.5px;
  height: 23px;
  background: #ffe9eb;
  display: flex;
  font-size: 12px;
  align-items: center;
  border-radius: 8px;
}
.content .searchDetialItem .bottom .left {
  width: 36px;
  height: 19px;
  color: #fff;
  background: #fe1a32;
  text-align: center;
  line-height: 19px;
  border-radius: 10px;
  margin: 0 10px 0 5px;
}
</style>